/**
 * Created by ysl on 2017/8/24.
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text, ToastAndroid,
    TouchableWithoutFeedback,
    TouchableHighlight
} from 'react-native';

import RefrshList from './RefreshList';
import {Titles} from "../Titles";

export default class RefreshListTest extends Component {
//_listRef.setError();//数据加载出错
// _listRef.setData([]);;//设置数据
// this._listRef.addData(arr);//加载更多数据

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.list = [];
        for (let i = 0; i < 10; ++i) {
            this.list.push(1);
        }

        this.time1 = setTimeout(() => {
            //设置数据
            this._listRef.setData(this.list);
        }, 200);

    }

    render() {
        return (
            <View style={styles.container}>


                <Titles
                    style={styles.back}
                    backLast={() => {
                        this.props.navigation.goBack();
                    }}
                    leftText="返回"
                    titleTexts="上拉列表"
                    rightText="right"

                ></Titles>


                <RefrshList
                    ref={(list) => this._listRef = list}//引用数据
                    ItemHeight={120}//设置行高
                    onEndReached={() => this._loadMore()}
                    removeClippedSubviews={false}
                    renderItem={(item) => this._renderItem(item)}
                />
            </View>
        );
    }


    /**
     * 点击事件
     * @param item
     * @private
     */
    _onItemPress(item) {
        console.log(item.item + "");
    }

    /**
     * 加载更多  数据加载
     * @private
     */
    _loadMore() {
        console.log("loadmore");

        if (true) {
            this.time2 = setTimeout(() => {
                let arr = [];
                for (let i = 0; i < 4; ++i) {
                    arr.push(" " + 3);
                }
                this._listRef.addData(arr);
            }, 200);
        } else {
            this._listRef.addData([]);
        }

    }

    /**
     * 渲染item 布局
     * @param item
     * @returns {XML}
     * @private
     */
    _renderItem(item) {
        return (
            <TouchableWithoutFeedback
                underlayColor="rgba(34, 26, 38, 0.1)"
                onPress={() => {
                    this._onItemPress(item)
                }}>
                <View style={styles.listWrapper}>
                    <View style={styles.listItemWrapper}><Text>{item.index + ""}</Text></View>
                    <View style={styles.listItemWrapper}><Text>{item.item + ""}</Text></View>
                    <View style={styles.listItemWrapper}><Text style={styles.listItemTextBlue}>{"sddsd"}</Text></View>
                    <View style={styles.listItemWrapper}><Text style={styles.listItemTextRed}>{"sddsd"}</Text></View>
                </View>
            </TouchableWithoutFeedback>
        )
    }

    componentWillUnmount() {

        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        this.time1 && clearTimeout(this.time1);
        this.time2 && clearTimeout(this.time2);
    }

}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    back: {
        height: 49,

    },
    listWrapper: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
        height: 100,
        borderTopWidth: 1,
        borderTopColor: '#EBEBEB',
    },
    listItemWrapper: {
        width: '25%',
        justifyContent: 'center',
        alignItems: 'center',
        margin: 10
    },
    listItemTextBlue: {
        color: '#45a162',
    },
    listItemTextRed: {
        color: '#c84a4a',
    }
});